<template>
	<uni-popup
		ref="popup"
		:animation="false"
		:isMaskClick="1 === 0"
		:maskClick="1 === 0"
	>
		<view class="popup-content">
			<view class="popup-content-main">
				<view class="picker__toolbar justify-between">
					<view class="picker__cancel" @click="cancel">取消</view>
					<!-- <view class="van-ellipsis picker__title">{{label}}</view> -->
					<view class="picker__confirm" @click="onConfirm">确认</view>
				</view>
				<scroll-view class="picker__content" scroll-y="true">
					<input
						class="uni-input bottom-line keyword-input"
						v-if="isSearch"
						v-model="searchKey"
						placeholder="输入关键字搜索"
						@input="search"
					/>
					<!-- <view class="uni-list" v-if="multiple && !isSearching">
						<custom-checkbox
							v-model="checkedAll"
							label="全选"
							@toggle="toggleAll"
							fontSize="36rpx"
							circleSize="scale(1.2)"
							:color="color"
							:circleColor="circleColor"
						/>
					</view> -->
					<view class="uni-list" v-if="multiple">
						<template v-if="columnsData.length > 0">
							<custom-checkbox
								:value="item.checked"
								:label="item.name"
								@toggle="toggleIt($event, item, index)"
								v-for="(item, index) in columnsData"
								:key="index"
								:fontSize="labelFontSize"
								:circleSize="circleSize"
								:color="color"
								:circleColor="circleColor"
							/>
						</template>
						<template v-else>
							<view class="no__data">{{ noData }}</view>
						</template>
					</view>
					<view class="uni-list" v-else>
						<template v-if="columnsData.length > 0">
							<custom-checkbox
								v-model="item.checked"
								:label="item.name"
								@toggle="toggleIt($event, item, index)"
								v-for="(item, index) in columnsData"
								:key="index"
								:fontSize="labelFontSize"
								:circleSize="circleSize"
								:color="color"
								:circleColor="circleColor"
							/>
						</template>
						<template v-else>
							<view class="no__data">{{ noData }}</view>
						</template>
					</view>
				</scroll-view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
import CustomCheckbox from '../custom-checkbox/custom-checkbox.vue'
export default {
	name: 'NiceuiPopupSelect',
	components: {
		CustomCheckbox
	},
	props: {
		columns: {
			type: Array,
			default: function () {
				return []
			}
		},
		selectValue: {
			type: Array,
			default: function () {
				return []
			}
		},
		option: {
			type: Object,
			default: function () {
				return { label: 'label', value: 'value' }
			}
		},
		//是否支持搜索
		isSearch: {
			type: Boolean,
			default: true
		},
		multiple: {
			type: Boolean,
			default: true
		},
		labelFontSize: {
			type: String,
			default: '32rpx'
		},
		color: {
			type: String,
			default: '#333'
		},
		circleSize: {
			type: String,
			default: 'scale(1)'
		},
		circleColor: {
			type: String,
			default: '#004aff'
		}
	},
	watch: {
		selectValue: {
			handler(newVal) {
				console.log('selectValue-------newVal:', newVal)
				this.selectionOrder = newVal
				// this.selectionOrder = newVal.map((item) => item.id)
			},
			immediate: true,
			deep: true
		}
	},
	data() {
		return {
			isSearching: false,
			searchKey: '',
			columnsData: [],
			checkedValue: [],
			checkedAll: false,
			tempValue: [],
			noData: '没有更多内容了',
			value: false,
			selectionOrder: []
		}
	},
	methods: {
		getData(val) {
			const res = this.columnsData?.filter((item) => {
				return val.indexOf(item[this.option.value]) > -1
			})
			return res
		},
		onConfirm() {
			this.tempValue = []
			this.searchKey = ''
			this.isSearching = false
			const ck = this.columnsData.filter((d) => d.checked == true)

			const selectedValues = [...this.selectionOrder] // Copy to avoid mutation
			const selectedItems = selectedValues
				.map((value) =>
					this.columnsData.find((d) => d[this.option.value] === value)
				)
				.filter(Boolean) // Filter out any undefined in case data changed

			//	const ks = ck.map((d) => d[this.option.value])
			this.$emit('confirm', selectedValues, this.getData(selectedValues))
		},
		cancel() {
			this.tempValue = []
			this.searchKey = ''
			this.isSearching = false
			this.closePopup()
		},
		showPopup() {
			this.columnsData = JSON.parse(JSON.stringify(this.columns))
			this.columnsData.forEach((d) => (d.checked = false))
			this.checkedValue = JSON.parse(JSON.stringify(this.selectValue))
			if (this.checkedValue && this.checkedValue.length > 0) {
				this.columnsData.forEach((d) => {
					if (this.checkedValue.includes(d[this.option.value])) {
						d.checked = true
					}
				})
				if (this.checkedValue.length != this.columnsData.length) {
					this.checkedAll = false
				} else {
					this.checkedAll = true
				}
			} else {
				this.checkedAll = false
			}
			this.$refs.popup.open('bottom')
		},
		closePopup() {
			this.$refs.popup.close()
		},
		toggleIt(v, item, index) {
			console.log('toggleIt-------v:', v)
			console.log('toggleIt-------item:', item)
			console.log('toggleIt-------index:', index)
			if (this.multiple) {
				console.log('多选')
				item.checked = v
				console.log('1this.columnsData:', this.columnsData)
				this.$set(this.columnsData, index, item)
				console.log('2this.columnsData:', this.columnsData)

				const value = item[this.option.value]
				if (v) {
					// Add to selection order if checked and not already present
					if (!this.selectionOrder.includes(value)) {
						this.selectionOrder.push(value)
					}
				} else {
					// Remove from selection order if unchecked
					this.selectionOrder = this.selectionOrder.filter((v) => v !== value)
				}

				if (!v) {
					this.checkedAll = false
				} else {
					const ck = this.columnsData.filter((d) => d.checked == false)
					if (ck.length == 0) {
						this.checkedAll = true
					}
				}
			} else {
				this.columnsData.forEach((d) => (d.checked = false))
				item.checked = true
				this.$set(this.columnsData, index, item)
			}
			if (!v) {
				this.tempValue = this.tempValue.filter(
					(tv) => tv != item[this.option.value]
				)
			} else {
				if (!this.tempValue.includes(item[this.option.value])) {
					this.tempValue.push(item[this.option.value])
				}
			}
			console.log(
				'toggleIt-------this.tempValue:',
				this.columnsData,
				this.selectionOrder
			)
		},
		toggleAll(v) {
			this.checkedAll = v
			if (this.checkedAll) {
				this.columnsData.forEach((d) => (d.checked = true))
			} else {
				this.columnsData.forEach((d) => (d.checked = false))
			}
		},
		refreshTemp() {
			const ck = this.columnsData.filter((d) => d.checked == true)
			const ks = ck.map((d) => d[this.option.value])
			ks.forEach((k) => {
				if (!this.tempValue.includes(k)) {
					this.tempValue.push(k)
				}
			})
		},
		search(val) {
			console.log('search-------val:', val)
			// #ifdef MP-WEIXIN
			// #endif
			val = val.detail.value //小程序取值

			if (val) {
				this.isSearching = true
				//先将勾选的临时存储
				this.refreshTemp()
				this.columnsData = this.columnsData.filter((item) => {
					return item[this.option.label].indexOf(val) > -1
				})
			} else {
				this.isSearching = false
				this.columnsData = JSON.parse(JSON.stringify(this.columns))
				if (this.tempValue && this.tempValue.length > 0) {
					this.columnsData.forEach((d) => {
						if (this.tempValue.includes(d[this.option.value])) {
							d.checked = true
						}
					})
					if (this.tempValue.length != this.columnsData.length) {
						this.checkedAll = false
					} else {
						this.checkedAll = true
					}
				}
			}
		}
	}
}
</script>

<style lang="scss" scoped>
//结果弹窗
::v-deep .close-view {
	height: 130rpx;
	image {
		width: 100rpx;
		height: 100rpx;
	}
}
::v-deep .popup-content {
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	background-color: #fff;
	padding: 1rpx;
	width: 100vw;
	// height: 70vh;
	// overflow-y: scroll;
	.popup-content-main {
		margin: 50rpx auto 30rpx;

		.picker__toolbar {
			box-sizing: border-box;
			margin: 20rpx 32rpx;
			font-size: $uni-font-size-lg;
			display: flex;
			align-items: center;
			.picker__cancel {
				color: #969799;
			}
			.picker__confirm {
				color: #576b95;
			}
			.picker__title {
				font-size: 38rpx;
				color: #6f6f6f;
			}
		}

		.picker__content {
			max-height: 500rpx;
			overflow-y: auto;

			.keyword-input {
				font-size: 32rpx;
			}
			.check__all {
				box-sizing: border-box;
				margin: 20rpx 23rpx 20rpx 32rpx;
				padding: 20rpx 0rpx;
				border-bottom: solid 1rpx #f7f7f7;
				display: flex;
				justify-content: space-between;
				.check__all_left {
					color: #666;
					font-size: 32rpx;
				}
				.check__all_right {
				}
			}

			.uni-list {
				box-sizing: border-box;
				margin: 20rpx 32rpx;
				label {
					padding: 20rpx 0rpx;
					border-bottom: solid 1rpx #f7f7f7;
				}
				.uni-list-cell {
					.cell-label {
						font-size: 35rpx;
					}
					checkbox {
						//transform:scale(0.8,0.8)
					}
				}
				.no__data {
					color: #999;
					font-size: 30rpx;
					text-align: center;
					margin-top: 50rpx;
				}
			}
		}
	}
}

.bottom-line {
	border-bottom: solid 3rpx #eee;
	margin: 20rpx 32rpx;
	height: 72rpx;
}
.justify-between {
	justify-content: space-between;
}
</style>
